<template>
  <div ref="dashboard" class="dashboard-container">
    <el-button type="primary" size="default" @click="screenFul">全屏</el-button>
    <countTo :startVal='1000' :endVal='2000' :duration='3000'></countTo>
    <el-progress :percentage="50" color="linear-gradient(to top, red, green)" status="success"></el-progress>
    <div class="order">
      <Order></Order>
    </div>
    <div class="purcles">
      <purcles></purcles>
    </div>
    <div class="map">
      <Map></Map>
    </div>
    <div class="words">
      <Words></Words>
    </div>
    <div class="bgAnimate">
      <BgAnimate></BgAnimate>
    </div>
   
    <!-- <div id="main" class="main"></div> -->
  </div>
</template>

<script>
import Order from "./components/Order.vue"
import Map from "./components/Map.vue"
import Words from "./components/Words.vue"
import purcles from "./components/Purcles.vue"
import * as echarts from 'echarts';
import screenfull from 'screenfull'
import countTo from 'vue-count-to';
import BgAnimate from "@/components/Vue_Background_Animation-master (1)/Vue_Background_Animation-master/BgAnimate.vue"
export default {
  components:{
    Order,
    purcles,
    Map,
    Words,
    countTo ,
    BgAnimate
  },
  methods:{
    screenFul(){
      if (screenfull.isEnabled) {
      // 控制是否全屏的按钮
        screenfull.toggle(this.$refs.dashboard)
      }
    }
  }
  // mounted(){
  //   // 基于准备好的dom，初始化echarts实例
  //     var myChart = echarts.init(document.getElementById('main'));
  //     // 绘制图表
  //     myChart.setOption({
  //       // 标题组件部分
  //       title: {
  //         text: '订单'
  //       },
  //       // 提示框组件。
  //       tooltip: {
  //         show:false
  //       },
  //       xAxis: {
  //         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
  //         axisLabel:{
  //           color :"red"
  //         }
  //       },
  //       yAxis: {},
  //       // 一组数值以及他们映射成的图
  //       // https://echarts.apache.org/v4/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88
  //       series: [
  //         {
  //           name: '销量',
  //           type: 'line',
  //           data: [5, 20, 36, 10, 10, 20]
  //         }
  //       ]
  //     });
  // }
}
</script>

<style lang="scss" scoped>

.dashboard-container {
  ::v-deep .el-progress-bar__inner{
    background-image: linear-gradient(to top, red, green);
  }
}
.main{
  width: 400px;
  height: 400px;
}
.order{
  width: 400px;
  height: 400px;
  // background: #0a1631;
}
.purcles{
  width: 400px;
  height: 400px;
  // background: #0a1631;
}
.words{
  width: 400px;
  height: 400px;
  // background: #0a1631;
}
.map{
  width: 400px;
  height: 400px;
  // background: #0a1631;
}
// .bgAnimate{
//   position: relative;
// }
</style>
